<template>
  <div>
  <van-nav-bar
  class="navBar"
  title="注册页面"
  left-text="返回"
  left-arrow
 @click-left="$router.go(-1)"
/>
    <!-- 手机号 密码   验证码  注册 -->
   <van-form validate-first >
  <!-- 账号 -->
  <van-field 
    class="inputphone"
    v-model="value.mobile"
    name="password"
    placeholder="请填写账号"
    :rules="rules.mobile"
  >
  <span slot="left-icon"><img class="iconphone" src="@/assets/images/手机号.png" alt=""> </span>
  </van-field>
<!-- 密码 -->
  <van-field 
    class="inputphone"
    v-model="value.password"
    name="password"
    placeholder="请填写密码"
    :rules="rules.password"
  >
  <span slot="left-icon"><img class="iconphone" src="@/assets/images/密码.png" alt=""> </span>
  </van-field>
  <!-- 验证码 -->
  <van-field
        v-model="value.code"
        type="text"
        name="code"
        placeholder="请填写验证码"
        :rules="rules.code"
      >
        <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
        <template #button>
          <van-button @click="getCode" v-if="flag" size="small" class="codeSend"
            >发送验证码</van-button
          >
          <van-count-down @finish="finish" v-else :time="time" format="ss s" />
        </template>
      </van-field>
   </van-form>
   <div class="registerBox">
    <div class="chose"> <input  type="checkbox"  name="" id="">  <span>我已同意下列条款</span><a href="javascripet:;">[用户手册]</a></div>
      <div class="register">立即注册</div>
   </div>
      
  </div>
</template>

<script>
import { sendCode } from '@/api'
export default {
  data() {
    return {
      value:{
       mobile:'',
       password:'',
       code:'',
      },
        time: 60 * 1000,
       flag: true,
       rules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /\d{11}/, message: '请填写11位手机号' },
        ],
       password: [
          { required: true, message: '请填写密码' },
          { pattern: /^(\w){6,20}$/, message: '只能输入6-20个字母、数字、下划线' },
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /\d{6}/, message: '请填写6位验证码' },
        ],
      },
    }
  },
  created() {},
  mounted() {},
  methods: {
 async getCode(){
   this.flag = false
 },
  async finish() {
      console.log(123)
      this.flag = true
        const { data: res } = await sendCode(this.user.mobile)
        console.log(res, '获取验证码')
    },
   async registerPost(){
      const { data: res } = await sendCode()
      console.log(res,'注册');
   }



  },
}
</script>
<style lang="scss" scoped>
.registerBox{
  margin: 0 16px;
  /deep/.register{
   width: 100%;
   height: 44px;
   text-align: center;
   line-height: 44px;
    background-color:#4acda5;
    color: #fff;
    border-radius: 22px;
    box-shadow: 3px 0px 0px #ccc;
    margin-top: 20px;
  }
 .chose{
      display: flex;
      justify-content: flex-end;
    }}
  .iconphone{
    width: 18px;
    margin-top: 2px;
  }
  .navBar{
    background-color: #4acda5;
    color:#fff
  }
  /deep/.codeSend{
    background-color:#4acda5;
    color: #fff;
     border-radius: 10px;
  }
</style>
